{% extends "base.html" %}
{% block content %}
<style>
    .demo-reg-container{width: 500px; margin: 100px auto 0;}
    .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form" id="alldata">
    <div class="demo-reg-container">
      <div class="layui-form-item">
        <div class="layui-row">
          <div class="layui-col-xs7">
            <div class="layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-cellphone"></i>
              </div>
              <input type="text" name="email" value="" lay-verify="required|email" placeholder="邮箱" lay-reqtext="请填写邮箱" autocomplete="off" class="layui-input" id="reg-cellphone">
            </div>
          </div>
          <div class="layui-col-xs5">
            <div style="margin-left: 11px;">
              <input type="button" class="layui-btn layui-btn-fluid layui-btn-primary" lay-on="reg-get-vercode" value="获取验证码" id="btnSendCode">
            </div>
          </div>
        </div>
      </div>
      <input name="check_vercode" value="" type="hidden">
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-vercode"></i>
          </div>
          <input type="text" name="vercode" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-username"></i>
          </div>
          <input type="text" name="username" value="" lay-verify="required" placeholder="昵称" autocomplete="off" class="layui-input" lay-affix="clear">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-password"></i>
          </div>
          <input type="password" name="password" value="" lay-verify="required" placeholder="新密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-password"></i>
          </div>
          <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认新密码" autocomplete="off" class="layui-input" lay-affix="eye">
        </div>
      </div>
      
      <div class="layui-form-item">
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">确认</button>
      </div>
      
    </div>
  </form>
  <script>
   
        layui.use(function(){
            var $ = layui.$;
            var form = layui.form;
            var layer = layui.layer;
            var util = layui.util;
            
            // 自定义验证规则
            form.verify({
                // 确认密码
                confirmPassword: function(value, item){
                    var passwordValue = $('#reg-password').val();
                    if(value !== passwordValue){
                        return '两次密码输入不一致';
                    }
                }
            });

            
        
            // 提交事件
            form.on('submit(demo-reg)', function(data){
                var field = data.field; // 获取表单字段值
                // 此处可执行 Ajax 等操作
                $.post("{{url_for('forget_password')}}",{'status':2,'email':field.email,'check_vercode':field.check_vercode,'username':field.username,'confirmPassword':field.confirmPassword,'password':field.password,'vercode':field.vercode,'csrf_token':"{{csrf_token()}}"},function(res){
                    if(res.code==200){
                        layer.msg(res.msg,{icon: 1, time: 1500},function(){
                            window.location.href = "{{url_for('login')}}"
                        })
                        return false;
                    }else{
                        layer.msg(res.msg,{icon: 2, time: 1500})
                        return false;
                    }
                })
                
                return false; // 阻止默认 form 跳转
            });
        
            var wait = 60;
            function time(o) {
                if (wait == 0) {
                    o.removeAttribute("disabled");
                    o.value = "获取验证码";
                    wait = 60;
                } else {
                    o.setAttribute("disabled", true);
                    o.value = "重新发送(" + wait + ")";
                    wait--;
                    setTimeout(function () {
                        time(o);
                    }, 1000);
                }
            }

            // 普通事件
            util.on('lay-on', {
                // 获取验证码
                
                'reg-get-vercode': function(othis){
                  
                    $('.btnSendCode').attr("disabled", false).removeClass("layui-btn layui-btn-primary").addClass("layui-btn layui-btn-normal");

                    if (wait != 60) {
                        console.log("请" + wait + "秒后再试！");
                        return;
                    }

                    time(this);

                    var isvalid = form.validate('#reg-cellphone'); // 主动触发验证，v2.7.0 新增 
                    var email = $('input[name=email]').val() // 'iframeId'是iframe的ID
                    // 验证通过
                    if(isvalid && email){
                       $.post("{{url_for('forget_password')}}",{'status':1,'email':email,'csrf_token':"{{csrf_token()}}"},function(res){
                            // console.log(res)
                            if(res.code==200){
                                $('input[name=check_vercode]').val(res.payload)
                                layer.msg(res.msg,{icon: 1, time: 1500})
                                return false;
                            }else{
                                layer.msg(res.msg,{icon: 2, time: 2000})
                                return false;
                            }
                       })
                    }
                }
            });
        });
    </script>
{% endblock %}